<template>
  <div class="sale-total pad">
    <div class="head">
      <span>销售员统计</span>
    </div>
    <div class="search m-t-b flex">
      <el-input placeholder="姓名/身份证号" v-model="search.text" clearable @input="cancelSearch">
        <el-select style="width: 120px;" slot="prepend" v-model="search.type">
          <el-option :value="1" label="姓名"></el-option>
          <el-option :value="2" label="身份证号"></el-option>
        </el-select>
      </el-input>
      <el-button @click="handleSearch" type="primary">
        <i class="el-icon-search"></i> 搜索
      </el-button>
    </div>
    <el-table class="m-t-b" border stripe :data="sales">
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="身份证号" prop="idCard"></el-table-column>
      <el-table-column label="人数" prop="total"></el-table-column>
    </el-table>
    <el-pagination
      class="m-t-b flex"
      :page-size="pageSize"
      layout="prev, pager, next"
      @current-change="handlePagi"
      :total="total">
    </el-pagination>
  </div>
</template>
<script>
export default {
  name: 'sale-total',
  data () {
    return {
      pageSize: 10,
      total: 0,
      search: {
        text: '',
        type: 1
      },
      sales: Array(10).fill({
        name: '张三',
        idCard: '12412341234123',
        total: 30
      })
    }
  },
  methods: {
    handleSearch () {
      if (!this.search.text.trim()) {
        this.$message.error('搜索内容不能为空!');
        this.search.text = '';
        return
      };
      console.log(this.search)
    },
    cancelSearch () {
      if (!this.search.text) {
        console.log('重新请求列表')
      }
    },
    handlePagi (page) {
      console.log(page)
    }
  }
}
</script>
<style lang="scss">
  .sale-total {
    .cell {
      text-align: center;
    }
  }
</style>
